<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/iconfont.css">
    <link rel="stylesheet" href="../../css/base.css">
    <script src="../../js/jquery-1.11.0.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../js/frameAll.js"></script>
    <style>
        .layui-form {
            margin-top: 30px;
        }
    </style>

</head>
<body>
<form class="layui-form" lay-filter="infoForm">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户名 : </label>
            <div class="layui-input-inline shortInput">
                <input type="text" name="username" autocomplete="off" class="layui-input"
                       placeholder="请输入要查询的用户名">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">权限 : </label>
            <div class="layui-input-inline shortInput">
                <select name="competence">
                    <option value="">所有权限</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态 : </label>
            <div class="layui-input-inline shortInput">
                <input type="checkbox" name="stateOn" title="启用" checked>
                <input type="checkbox" name="stateOff" title="停用" checked>
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="submitBut">查询</button>
        </div>
        <div class="layui-inline" style="float:right;margin-right: 5%">
            <button id="addUser" type="button" class="layui-btn">添加用户</button>
        </div>
    </div>
</form>
<table id="info" lay-filter="user"></table>
<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table,
            form = layui.form;
        var formVal = form.val('infoForm');
        var whereInfo = {
            username: formVal.username,
            competence: formVal.competence,
            stateOn: formVal.stateOn,
            stateOff: formVal.stateOff,
        };
        //数据表格
        var tableIns = table.render({
            elem: '#info',
            height: 'full-128',
            url: '/fixedAsset/user/page.do',
            cellMinWidth: '138',
            text: {
                none: 'QAQ没有查到数据，换个条件吧'
            },
            where: whereInfo,
            request: {
                pageName: 'pageNo',
                limitName: 'pageSize'
            },
            page: true,
            cols: [[
                {title: '序号', type: 'numbers', width: 80},
                {field: 'username', title: '用户名', unresize: true},
                {field: 'comployeeNo', title: '员工编号', unresize: true},
                {title: '权限', unresize: true, templet: function (res) {
                        return res.competence.competenceName;
                    }
                },
                {field: 'state', title: '状态', templet: '#state', align: "center", unresize: true, sort: true},
                {title: '操作', align: "center", toolbar: '#barDemo',unresize: true,fixed:'right'}
            ]],
            error: function () {
                top.location.href = "../../login.html";
            },
            done: function (res) {
                if (res.message) {
                    noMsg(res.message);
                }
            },
        });
        //获取权限列表
        $.ajax({
            type: 'get',
            url: '/fixedAsset/user/competenceList.do',
            dataType: "Json",
            success: function (data) {
                for (let i = data.length - 1; i >= 0; i--) {
                    $('select').append(new Option(data[i].competenceName, data[i].competenceId));
                }
                form.render('select');
            }
        });
        //查询指定条件的用户
        form.on('submit(submitBut)', function (data) {
            var field = data.field;
            whereInfo.username = field.username;
            whereInfo.competence = field.competence;
            whereInfo.stateOn = field.stateOn;
            whereInfo.stateOff = field.stateOff;
            tableIns.reload({
                page: {curr: 1}
            });
            return false;
        });
        //编辑与删除
        table.on('tool(user)', function (obj) {
            var data = obj.data
                , layEvent = obj.event;

            if (layEvent === 'update') {
                layer.open({
                    type: 2,
                    title: '编辑用户',
                    area: ['350px', '84%'],
                    resize: false,
                    offset: '8%',
                    btn: ["提交", "取消"],
                    btnAlign: 'c',
                    scrollbar: false,
                    content: "addOrUpdate.html",
                    success: function(layero, index){
                        $(layero).find("iframe")[0].contentWindow.setInfo(data.username);
                    },
                    yes: function (index, layero) {
                        //父页面调用子页面的函数获取返回值
                        var info = $(layero).find("iframe")[0].contentWindow.getInfo();
                        console.log(info);
                        if (!/^[\S]{6,12}$/.test(info['username'])) {
                            noMsg("用户名格式错误！");
                        } else if (!(/^[\S]{6,12}$/.test(info['password']) || info['password'] === '')) {
                            noMsg("密码格式错误！");
                        } else if ("" === info['competenceId']) {
                            noMsg("请选择权限！");
                        } else {
                            //向后端发送更新信息的请求
                            $.ajax({
                                type: "Post",
                                url: "/fixedAsset/user/update.do",
                                data: info,
                                dataType: "Json",
                                success: function (data) {
                                    if (data.code === 0) {
                                        yesMsg(data.message);
                                        layer.close(index);
                                        tableIns.reload({
                                            page: {curr: $(".layui-laypage-em").next().html()}
                                        });
                                    } else {
                                        noMsg(data.message);
                                    }
                                }
                            });
                        }
                    }
                });
            } else if (layEvent === 'del') {
                layer.confirm('是否删除【'+data.username+'】？', function (index) {
                    //向服务端发送删除指令
                    $.ajax({
                        type: 'Post',
                        url: '/fixedAsset/user/delete.do',
                        data: {
                            username: data.username
                        },
                        dataType: 'Json',
                        success: function (data) {
                            if (data.code === 0) {
                                yesMsg(data.message);
                                obj.del();
                                layer.close(index);
                            } else {
                                noMsg(data.message);
                            }
                        }
                    });
                });
            }
        });

        //修改权限
        form.on('switch(state)', function (obj) {
            $.ajax({
                type: 'Post',
                url: '/fixedAsset/user/state.do',
                data: {
                    id: obj.value,
                    state: obj.elem.checked
                },
                dataType: 'Json',
                success: function (data) {
                    if (data.code === 0) {
                        yesMsg(data.message);
                        tableIns.reload({
                            page: {curr: $(".layui-laypage-em").next().html()}
                        });
                    } else {
                        noMsg(data.message);
                        obj.elem.checked = !obj.elem.checked;
                        form.render();
                    }
                }
            });
        });
        //添加用户
        $("#addUser").click(function () {
            layer.open({
                type: 2,
                title: '添加用户',
                area: ['350px', '84%'],
                resize: false,
                offset: '8%',
                btn: ["提交", "取消"],
                btnAlign: 'c',
                scrollbar: false,
                content: "addOrUpdate.html",
                yes: function (index, layero) {
                    //父页面调用子页面的函数获取返回值
                    var info = $(layero).find("iframe")[0].contentWindow.getInfo();
                    if (!/^[\S]{6,12}$/.test(info['username'])) {
                        noMsg("用户名格式错误！");
                    } else if (!(/^[\S]{6,12}$/.test(info['password']) || info['password'] === '')) {
                        noMsg("密码格式错误！");
                    } else if ("" === info['competenceId']) {
                        noMsg("请选择权限！");
                    } else {
                        //向后端发送更新信息的请求
                        $.ajax({
                            type: "Post",
                            url: "/fixedAsset/user/add.do",
                            data: info,
                            dataType: "Json",
                            success: function (data) {
                                if (data.code === 0) {
                                    yesMsg(data.message);
                                    layer.close(index);
                                    tableIns.reload({
                                        page: {curr: $(".layui-laypage-em").next().html()}
                                    });
                                } else {
                                    noMsg(data.message);
                                }
                            }
                        });
                    }
                }
            });
        });
    });
</script>
<script type="text/html" id="state">
    <input type="checkbox" value="{{d.username}}" lay-filter="state" lay-skin="switch" lay-text="启用|停用"
           {{ d.state ? 'checked' : '' }}>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-bg-blue layui-btn-sm" lay-event="update">编辑</a>
    <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="del">删除</a>
</script>
</body>
</html>